<template>
	<view>
		<view class="header">
			<uni-card class="picker">
				<picker :range="models" range-key="name" @change="modelChange">
					<view>{{model.name}}</view>
				</picker>
			</uni-card>
			<uni-card class="picker">
				<picker :range="categories" range-key="text" @change="cateChange">
					<view>{{category.text}}</view>
				</picker>
			</uni-card>
		</view>
		<scroll-view :scroll-top="0" :scroll-y="true" class="content">
			<uni-card v-if="showContent" title="AI面试官" :extra="`${category.text}面试题`">
				<text class="uni-body">{{content}}</text>
			</uni-card>
		</scroll-view>
		<view class="footer">
			<button type="primary" :disabled="startBtn.disabled" v-show="startBtn.show" class="startBtn"
				@click="startInterview">{{startBtn.text}}</button>
			<view v-show="!startBtn.show" class="answerBtnView">
				<button @click="handleAnswer('A')" v-show="!startBtn.show" :disabled="!startBtn.disabled"
					class="answerBtn" style="background-color: dodgerblue;">A</button>
				<button @click="handleAnswer('B')" v-show="!startBtn.show" :disabled="!startBtn.disabled"
					class="answerBtn" style="background-color: olivedrab;">B</button>
				<button @click="handleAnswer('C')" v-show="!startBtn.show" :disabled="!startBtn.disabled"
					class="answerBtn" style="background-color: orangered;">C</button>
				<button @click="handleAnswer('D')" v-show="!startBtn.show" :disabled="!startBtn.disabled"
					class="answerBtn" style="background-color: orange;">D</button>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		getSessionId
	} from '../../utils/tools';
	import {
		ref,
		reactive
	} from 'vue';
	import {
		getAllModels,
		getAllCategoryItems,
		chat
	} from '../../utils/api';
	import {
		onLoad
	} from '@dcloudio/uni-app'
	let startBtn = reactive({
		text: '开始面试',
		disabled: false,
		show: true
	})
	let subject = ref('')
	let showContent = ref(false)
	let content = ref('')
	let models = ref([])
	let categories = ref([])
	let model = reactive({
		name: '请选择AI模型',
		charge: undefined
	})
	let category = reactive({
		text: '请选择技术分类',
		value: '请选择技术分类'
	})

	function handleAnswer(answer) {
		let mpRequest = {
			sessionId: uni.getStorageSync('sessionId'),
			content: answer,
			type: 'a',
			subject: subject.value,
			modelName: model.name
		}
		uni.showLoading({
			title: '面试官正在思考'
		})
		startBtn.disabled = false
		handleRequest(mpRequest)
	}

	function handleRequest(data) {
		chat(data).then(res => {
			startBtn.show = !startBtn.show
			startBtn.text = '再来一道'
			showContent.value = true
			content.value = res.content
		})
	}
	
	function updateStartBtn(){
		startBtn.show = true
		startBtn.text = '开始面试'
		startBtn.disabled=false
		showContent.value = false
		content.value = ''
	}

	function startInterview() {
		if (model.name == '请选择AI模型') {
			uni.showToast({
				title: '请选择AI模型',
				icon: 'none'
			})
			return
		}
		if (category.text == '请选择技术分类') {
			uni.showToast({
				title: '请选择技术分类',
				icon: 'none'
			})
			return
		}
		let mpRequest = {
			sessionId: generateSessionId(),
			content: category.value,
			type: 'q',
			subject: subject.value,
			modelName: model.name
		}
		uni.showLoading({
			title: '面试官正在出题'
		})
		startBtn.disabled = true
		handleRequest(mpRequest)
	}

	function generateSessionId() {
		let sessionId = getSessionId()
		uni.setStorage({
			key: 'sessionId',
			data: sessionId
		})
		return sessionId
	}

	function modelChange(event) {
		updateStartBtn()
		Object.assign(model, models.value[event.detail.value])
	}

	function cateChange(event) {
		updateStartBtn()
		Object.assign(category, categories.value[event.detail.value])
	}
	onLoad((options) => {
		let cate = options.cate
		subject.value = cate
		uni.getStorage({
			key: 'models',
			success: res => {
				models.value = res.data
			},
			fail: err => {
				getAllModels().then(res => {
					models.value = res
					uni.setStorage({
						key: 'models',
						data: res
					})
				})
			}
		})
		uni.getStorage({
			key: cate + '_items',
			success: res => {
				categories.value = res.data
			},
			fail: err => {
				getAllCategoryItems(cate).then(res => {
					categories.value = res
					uni.setStorage({
						key: cate + '_items',
						data: res
					})
				})
			}
		})
	})
</script>

<style>
	.content {
		position: fixed;
		top: 72px;
		bottom: 64px;
	}

	.answerBtn {
		width: 48px;
		height: 48px;
		border-radius: 48px;
	}

	.answerBtnView {
		display: flex;
		justify-content: space-around;
		align-items: center;
		width: 70%;
	}

	.startBtn {
		width: 90%;
		transform-style: preserve-3d;
	}

	.footer {
		position: fixed;
		left: 0;
		width: 100%;
		height: 64px;
		bottom: 0px;
		background-color: white;
		display: flex;
		align-items: center;
		opacity: 1;
		justify-content: center;
	}

	.picker {
		width: 49%;
		display: inline-block;
	}

	.header {
		position: fixed;
		width: 100%;
		top: 0px;
		background-color: white;
		opacity: 1;
	}
</style>